<template>
  <view class="container">
    <div style="padding: 20rpx; background-color: white">
      <view class="example-body">
        <uni-datetime-picker @change="change" returnType="timestamp" v-model="datetimerange" type="datetimerange"
          rangeSeparator="至" />
      </view>
    </div>

    <div class="title_sum">共30天，{{ list.length }}家机构</div>
    <div class="order_card" v-for="(item, index) in list" :key="index">
      <div class="order_card_title">{{ item.name }}</div>

      <div class="order_card_content">
        <div class="order_card_item">
          <div class="order_card_item_title">设备总数</div>
          <div class="order_card_item_value">{{ item.equipment_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">使用率</div>
          <div class="order_card_item_value">{{ item.equipment_usage_rate }}%</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">订单数量</div>
          <div class="order_card_item_value">{{ item.order_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">订单总额</div>
          <div class="order_card_item_value">{{ (item.order_money_total * 1).toFixed(2) }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">中午单数</div>
          <div class="order_card_item_value">{{ item.noon_order_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">中午总额</div>
          <div class="order_card_item_value">{{ item.noon_order_money }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">晚上单数</div>
          <div class="order_card_item_value">{{ item.night_order_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">晚上总额</div>
          <div class="order_card_item_value">{{ item.night_order_money }}</div>
        </div>
      </div>
    </div>

    <div class="order_card" v-for="(item, index) in department" :key="index">
      <div class="order_card_title">{{ item.hospital_name }}({{ item.deptname }})</div>

      <div class="order_card_content">
        <div class="order_card_item">
          <div class="order_card_item_title">设备总数</div>
          <div class="order_card_item_value">{{ item.equipment_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">使用率</div>
          <div class="order_card_item_value">{{ item.equipment_usage_rate * 100 }}%</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">订单数量</div>
          <div class="order_card_item_value">{{ item.order_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">订单总额</div>
          <div class="order_card_item_value">{{ (item.order_money_total * 1).toFixed(2) }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">中午单数</div>
          <div class="order_card_item_value">{{ item.noon_order_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">中午总额</div>
          <div class="order_card_item_value">{{ item.noon_order_money }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">晚上单数</div>
          <div class="order_card_item_value">{{ item.night_order_total }}</div>
        </div>

        <div class="order_card_item">
          <div class="order_card_item_title">晚上总额</div>
          <div class="order_card_item_value">{{ item.night_order_money }}</div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>



import { getHospitalStatistics } from "@/api/index.js";
export default {
  data() {
    return {
      content: "",
      keyword: "",
      show: false,
      datetimerange: [],
      list: [],
      // 科室统计
      department: [],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {

    // datetimerange的默认值是当前时间的前30天
    this.datetimerange = [
      // 当前时间减去30天，毫秒时间戳
      new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000),
      new Date()
    ];

    this.getData();
  },

  methods: {
    async getData(starttime, endtime) {

      this.list.length = 0;
      this.department.length = 0;

      let _obj = {};

      if (starttime && endtime) {
        _obj = {
          starttime,
          endtime,
        };
      }

      const res = await getHospitalStatistics({
        ..._obj,
        hospital_id: uni.getStorageSync("curHospital"),
      });

      res.hospital.forEach((_r) => {
        this.list.push(_r)
      })
      res.department.forEach((_r) => {
        this.department.push(_r)
      })
    },
    change(val) {
      console.log('valvalval', val);
      this.getData(val?.[0] / 1000, val?.[1] / 1000)
    },

    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #ebebeb;
}

.custom_btn {
  width: 100rpx;
  height: 50rpx;
  border-radius: 4rpx;
  background-color: rgba(78, 147, 221, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 26rpx;
  text-align: center;
  font-family: PingFangSC-regular;
}

.jigou_box {
  // width: 760rpx;
  height: 88rpx;
  line-height: 40rpx;
  border-radius: 24rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 28rpx;
  text-align: center;
  font-family: PingFangSC-regular;

  padding: 20rpx 40rpx;
  display: flex;
  justify-content: space-between;

  margin-bottom: 15rpx;

  .title {
    line-height: 46rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .jigou_switch {
    width: 122rpx;
    border-radius: 8rpx;
    background-color: rgba(78, 147, 221, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 26rpx;
    font-family: PingFangSC-regular;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .jigou_switch_check {
    width: 122rpx;
    line-height: 38rpx;
    border-radius: 8rpx;
    background-color: rgba(81, 224, 14, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 26rpx;
    text-align: center;
    font-family: PingFangSC-regular;
  }
}

.example-body {
  background-color: #fff;
}

.title_sum {
  height: 80rpx;
  line-height: 80rpx;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin-left: 30rpx;
}

.order_card {
  // width: 100%;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  padding: 20rpx;
  margin-bottom: 20rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;

  .order_card_title {
    height: 80rpx;
    line-height: 80rpx;
    color: rgba(0, 0, 0, 1);
    font-size: 32rpx;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }

  .order_card_content {
    margin-top: 12rpx;
    display: flex;
    // 换行
    flex-wrap: wrap;
  }

  .order_card_item {
    width: 50%;
    display: flex;
    align-items: center;

    color: rgba(165, 165, 165, 1);
    font-size: 32rpx;
    text-align: left;
    font-family: SourceHanSansSC-regular;

    height: 60rpx;
  }

  .order_card_item_value {
    margin-left: 12rpx;
  }
}
</style>
